<script>
import { reactive } from 'vue';

export default {
  setup() {
    const pwdForm = reactive({
      old_pwd: '',
      new_pwd: '',
      re_pwd: ''
    });
    const checkDifferent = (rule, value, callback) => {
      if (value === pwdForm.value.old_pwd) {
        callback(new Error('新密码不能与原密码一样'));
      } else {
        callback();
      }
    };

    const checkSameAsNew = (rule, value, callback) => {
      if (value !== pwdForm.value.new_pwd) {
        callback(new Error('确认密码需与新密码一致'));
      } else {
        callback();
      }
    };
    const rules = {
      old_pwd: [
        {required: true, message: '请输入原密码', trigger: 'blur'},
        {min: 6, max: 15, message: '密码长度应为6~15位', trigger: 'blur'}
      ],
      new_pwd: [
        {required: true, message: '请输入新密码', trigger: 'blur'},
        {min: 6, max: 15, message: '密码长度应为6~15位', trigger: 'blur'},
        {validator: checkDifferent, trigger: 'blur'}
      ],
      re_pwd: [
        {required: true, message: '请输入确认密码', trigger: 'blur'},
        {min: 6, max: 15, message: '密码长度应为6~15位', trigger: 'blur'},
        {validator: checkSameAsNew, trigger: 'blur'}
      ]
    };

    const submitForm = (formRef) => {
      this.$refs[formRef].validate((valid) => {
        if (valid) {
          // 提交密码修改逻辑
        } else {
          return false;
        }
      });
    };

    const resetForm = (formRef) => {
      this.$refs[formRef].resetFields();
    };

    return {
      pwdForm,
      rules,
      submitForm,
      resetForm
    };
  }
};
</script>
<template>
  <el-form
      :model="pwdForm"
      :rules="rules"
      ref="pwdForm"
      label-width="100px"
  >
    <el-form-item label="原密码" prop="old_pwd">
      <el-input v-model="pwdForm.old_pwd" show-password></el-input>
    </el-form-item>
    <el-form-item label="新密码" prop="new_pwd">
      <el-input v-model="pwdForm.new_pwd" show-password></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="re_pwd">
      <el-input v-model="pwdForm.re_pwd" show-password></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('pwdForm')">修改密码</el-button>
      <el-button @click="resetForm('pwdForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
